<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义相机</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <div class="container">
      <div class="video-container">
        <video
          id="video"
          autoplay
          loop="false"
          muted
          show-progress="false"
          playsinline
          webkit-playsinline="true"
          x5-video-player-type="h5"
        ></video>
        <div class="operator">
          <div class="cancle-picture">取消</div>
          <div class="take-picture">拍照</div>
        </div>
      </div>
      <div class="pic-container"></div>
    </div>

    <script src="./js/liveCamera.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.14.6/vconsole.min.js"></script>
    <script>
      new VConsole()
      let camera
      function initCamera() {
        let width = window.screen.width
        let height = window.screen.height
        let video = document.getElementById("video")
        video.style.width = width + "px"
        video.style.height = height + "px"
        video.style["object-fit"] = "cover"
        camera = new liveCamera(video)
        console.log(camera.canUse() ? "支持视频流拍照" : "不支持视频流拍照")
        camera.canUse() ? openCamera() : alert("不支持视频流拍照！")
      }

      initCamera()

      function openCamera() {
        camera
          .openCamera()
          .then(res => {
            console.log("摄像机打开成功！", res)
          })
          .catch(err => {
            console.log("摄像机打开失败：", err)
          })
      }

      function closeCamera() {
        camera
          .closeCamera()
          .then(msg => {
            console.log(msg)
            uni.navigateBack()
          })
          .catch(msg => console.log(msg))
      }

      function takePhoto() {
        camera
          .takePhoto()
          .then(img2B64 => {
            console.log(img2B64.length)
            this.picture = img2B64
          })
          .catch(msg => console.log(msg))
      }
    </script>
  </body>
</html>
